<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-user-order">
      <!--tab-->
      <ul class="ga-tab gCell">
        <!--<li class="item active">全部</li>-->
        <li class="item" :class="{active : activeIndex == index}" v-for="(item,index) in tabs" :key="index" @click="tab(index)">{{item}}</li>
      </ul>
      <!--tab-->

      <!--order-list-->
      <ul class="order-list">
        <li class="item" v-for="(item,index) in orderlist" :key="index">
         <div class="state" :style="{'float':'left'}">订单号：{{item.order_sn}}</div> <div class="state">{{item.is_pay == 1 ? item.is_shipping == 1 ? item.is_delivery == 1 ? item.status == 2 ? '已完结': '已收货': '正在配送' :'未配送':'未支付'}}</div>

          <a class="product" href="#" v-for="(value,key) in item.order_goods" :key="key">
            <div class="item-media">
              <image class="img" mode="aspectFill" :src="value.goods_thumb"></image>
            </div>
            <div class="item-inner">
              <div class="inner1">
                <p class="p p1">{{value.goods_name}}</p>
                <p class="p p2">{{value.goods_type == 1?'普通商品':'货柜编码：'+value.co_sn}}</p>
                <p class="p p2">{{value.goods_type == 2? '取件码：'+value.pe_code : ''}}</p>
              </div>
              <div class="inner2">
                 <p class="p p3">¥{{value.goods_price}}</p>
                 <p class="p p4"></p>
                 <p class="p p5">x{{value.goods_number}}</p>
              </div>
            </div>
          </a>

          <div class="total">
            <span class="span">共{{item._order_goods_total}}件商品</span>
            <span class="span">合计:¥{{item.goods_amount}}</span>
            <span class="span"></span>
          </div>

          <div class="opera">
            <a class="span" :href="'/pages/storeorderdetail/main?id='+item.id">订单详情</a>
            <a class="span" v-if="item.is_pay == 0" v-on:click="pay(item.id)">立即支付</a>
            <span class="span" v-if="item.is_pay == 1 && item.is_shipping == 1 && item.is_delivery == 0" @click="receive(item.id)">确认收货</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {isLogin,showToast} from '@/utils/handleLogin'
export default {
  data () {
    return {
      tabs: ["全部", "未支付" ,'已支付' ,'已收货' ,'已完成'],
      activeIndex: 0,
      orderlist: []
    }
  },
  methods:{
    tab(index){
      this.activeIndex = index;
      this.load()
    },
    async load () {
      let params = {}
      if(this.activeIndex){
         params.status = this.activeIndex
      }
      this.$_util.ajax.post('https://guo-a.com/mapi/nearby/myorder?token=' + this.$store.state.Token,params).then((res) => {
         if(res.code === 200){
           this.orderlist = res.data
         }
      })
    },
    /*确认收货*/
    async receive (id) {
        let params = {
           id: id
        }
        this.$_util.ajax.post('https://guo-a.com/mapi/nearby/receive?token=' + this.$store.state.Token,params).then((res)=>{
          if(res.code === 200){
            this.load()
          }
        })
    },
    async pay (id) {
        let params = {
            id: id
        }
        let that = this
        this.$_util.ajax.post('https://guo-a.com/mapi/nearby/pay?token=' + this.$store.state.Token,params).then((res) => {
          if(res.code === 200){
            wx.requestPayment({
              'timeStamp': res.data.timeStamp,
              'nonceStr': res.data.nonceStr,
              'package': res.data.package,
              'signType': res.data.signType,
              'paySign': res.data.paySign,
              'success': function(dd){
                if(dd.errMsg == "requestPayment:ok"){
                  // 调用支付成功
                       that.load()
                }else if(dd.errMsg == 'requestPayment:cancel'){
                  // 用户取消支付
                }

              },
              'fail': function(dd){
                that.load()
                return false
              },
              'complete': function(dd){

              }
            })
          }
        })
    },
    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
        wx.navigateTo({
          url
        })
    },
    bindSwitchTab (url) {
        wx.switchTab({
          url
        })
    }
  },
  onLoad () {

  },
  onShow () {
    isLogin(() => {
      this.orderlist = []
      if(this.$root.$mp.query.hasOwnProperty('status')){
        this.activeIndex = this.$root.$mp.query.status
      }else{
        this.activeIndex = 0
      }
      this.load()
    })
  },
  mounted () {

  }
}
</script>
